<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>服务端列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/okadmin.css">
    <link rel="stylesheet" href="/font/iconfont.css">
    <link rel="stylesheet" href="/lib/nprogress/nprogress.css">
</head>
<body>
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
        <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>监控管理</cite></a>
            <a><cite>服务端列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <!--模糊搜索区域-->
    <div class="layui-row">
        <form class="layui-form layui-col-md12 ok-search">
            <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
            <input class="layui-input" placeholder="请输入用户名" autocomplete="off">
            <button class="layui-btn" lay-submit="" lay-filter="search">
                <i class="layui-icon layui-icon-search"></i>
            </button>
        </form>
    </div>
    <!--工具栏-->
    <okToolbar>
        <button class="layui-btn layui-btn-normal" id="sessionInfo">
            <i class="layui-icon layui-icon-senior"></i>SESSION信息
        </button>
        <span>共有数据：<i id="countNum"></i> 条</span>
    </okToolbar>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="/lib/layui/layui.js"></script>
<script src="/lib/nprogress/nprogress.js"></script>
<script src="/js/okutils.js"></script>
<script type="text/javascript" th:inline="none">
    NProgress.start();
    window.onload = function () {
        NProgress.done();
    }
    layui.use(["element", "table", "form", "jquery", "laydate", "util"], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var util = layui.util;
        // 固定块
        util.fixbar({});

        laydate.render({
            elem: '#startTime',
            type: "datetime"
        });

        laydate.render({
            elem: '#endTime',
            type: "datetime"
        });

        table.render({
            elem: '#tableId',
            url: '/server/list',
            method: "post",
            limit: 20,
            page: true,
            cols: [[
                {type: "checkbox"},
                {field: "id", title: "ID", width: 80, sort: true},
                {field: "token", title: "Server Token", width: 300},
                {field: "browser", title: "浏览器", width: 100},
                {field: "os", title: "操作系统", width: 100},
                {field: "createTime", title: "创建时间", width: 170, templet: "<div>{{ layui.util.toDateString(d.createTime) }}</div>"},
                {title: "操作", width: 100, templet: "#operationTpl", align: "center"}
            ]],
            done: function (res, curr, count) {
                $("#countNum").text(count);
            }
        });

        $("#sessionInfo").click(function () {
            layer.open({
                title: "SESSION信息",
                type: 2,
                shade: false,
                maxmin: true,
                shade: 0.5,
                anim: 4,
                area: ["90%", "90%"],
                content: "/server/session",
                zIndex: layer.zIndex,
                skin: 'layui-layer-molv',
                end: function () {
                    $(".layui-laypage-btn")[0].click();
                }
            });
        })
    })
</script>
<!--模板-->
<script type="text/html" id="operationTpl">
    <a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>
